/** @jsxImportSource @emotion/react */
import {  css } from "@emotion/react";
import * as React from "react";
import {
    Toolbar,
    Navbar,
    useTheme,
    IconButton,
    Button,
    Tabs,
    Tab,
    Layer,
    TabPanel,
    MenuList,
    MenuItem,
    Tooltip,
    IconChevronDown,
    IconPlus,
    DarkMode,
    LightMode,TwoHalfFrame,
    Pager, IconArchive, IconArrowRight, ButtonRefComp, DarkRefMode, useMMenuBarOcup,
} from "customize-easy-ui-component";

//import { useSession,  useSignOut } from "../auth";
//import { useLocation, Switch, Route, Link as RouterLink } from "wouter";
import { Link as RouterLink } from "../routing/Link";
import { useMedia } from "use-media";
//import { RelationList } from "../inspect/RelationList";

//import { RecordStarter, ReportStarter } from "./TemplateLoader";
import { InternalItemHandResult, ReportViewProps } from "./common/base";
import {useContext, useRef} from "react";
import {UserContext} from "../routing/UserContext";
import {PreloadedQuery, usePreloadedQuery} from "react-relay/hooks";
import {EachUnitMainQuery} from "../unit/__generated__/EachUnitMainQuery.graphql";
import {ReportStarter} from "./ReportStarter";
//import {OriginalRecordMainQuery} from "./__generated__/OriginalRecordMainQuery.graphql";
import {EditStorageContext, useEditStorageContext} from "./StorageContext";
import useLogoutMutation from "../common/useLogoutMutation";
import {DeviceList} from "../device/DeviceList";
//import {useImported} from "react-imported-component";
//import {originalTemplate, reportTemplate} from "./elevator/PeriodicalInspection.E";

const graphql = require("babel-plugin-relay/macro");

//模板的版本号和相应代码维护管理是个问题；不是下载离线的，而是时刻web在线的文档格式；配套数据库数据加上配套模板才能拼凑出正式文档。要保留维护几年？有人还在用旧的。
//模板类型：支持主报告类型1个+分报告类型多个的情况，报告展示入口管理。模板版本号由后端管理。
//正式报告的relay传递模型 不是采用的这里定义的：只是模型类型引用一样的。反而是后面的 ...ReportStarterIsp 才是给左边的正式报告所用的！在ReportStarterIsp上级或前面的添加字段没用的。
export const OriginalRecordMainQuery= graphql`
            query OriginalRecordMainQuery($id: ID! ) {
                getReport(id: $id) {
                    id,version,type
                    data
                    snapshot
                    modeltype,modelversion
                    isp{id},
                    ...ReportStarterIsp
                }
            }
        `;

interface OriginalRecordMainProps {
    prepared: {
        template: any;   //该类型的模板 主入口：
        query: PreloadedQuery<typeof OriginalRecordMainQuery>;
    }
    routeData: any;
    children: React.ReactNode;
}
/**原始记录编辑器左右两个页面入口
 *首次render时刻template应该还没有获取到的，需要第二次render才能获得到template。
 * */
export default function OriginalRecordMain( {
           prepared:{
               template: LibofLoadable, query: myQuery
           },
           routeData,
           children
 }:  OriginalRecordMainProps
) {
    const data = usePreloadedQuery<typeof OriginalRecordMainQuery>(
        OriginalRecordMainQuery,
        myQuery,
    );
    const { getReport: items }=data;
    const repContext = useEditStorageContext({});
    const [storage, setStorage] = React.useState(null);
    //套上EditStorageContext 右边组件编辑立刻能反馈给 左边组件=报告项目、列表的内容。这里Context.Provider还必需用吗？可移除。
    //Context更快，Realy要保存才行。虽然两个上下级路由页面，右边页面Relay变更后返回report的data数据，左边页面因为Relay针对同一个report的data就能立刻更新页面。不用EditStorageContext.Provider可以的！
    return (
      <EditStorageContext.Provider
            value={repContext}
      >
         <TwoHalfFrame  rightPanel={ children } >

            <LibofLoadable fallback={<h3>加载模板中...</h3>} >
                {
                    ( { reportTemplate, originalTemplate} :any) => {
                        //这个做法来源自,加载.lib(),  https://loadable-components.com/docs/library-splitting/
                        const originalNode= originalTemplate[routeData.params.verId];
                        const reportNode= reportTemplate[routeData.params.verId];
                        if(!reportNode || !originalNode)
                             throw new Error(`没有${routeData.params.template}类型${routeData.params.verId}版本${reportNode? '原始记录':'报告'}模板`);
                        return (
                         <OriginalRecordMainInner items={items}
                                                  originalNode={originalNode}
                                                  reportNode={reportNode}
                                                  routeData={routeData}
                         />
                        );
                    }
                }
            </LibofLoadable>

         </TwoHalfFrame>
      </EditStorageContext.Provider>
  );
}

//(非打印全屏幕的)正常的可编辑报告(左右两个半边页面)或者原始记录的框架入口，主要显示左边页面：
function OriginalRecordMainInner( {items, reportNode,originalNode, routeData}
        :{items:any, reportNode:any,originalNode:any, routeData:any}
) {
    const context=React.useContext(EditStorageContext);
    if(context == null)    throw new Error("EditStorageContext没有提供");
    const {storage, setStorage} =context;
    //特别注意：RecordEditorMain.tsx 也有初始化代码，需要俩个代码setStorage确保一致性。
    console.log("左边页面的OriginalRecordMainInner",storage,"routeData",routeData);
    React.useEffect(() => {
        const  dat =items&&items.data&&JSON.parse(items.data);
        const  snap =items&&items.snapshot&&JSON.parse(items.snapshot);
        //JPA互斥锁 _version 同时保存一份到了data区域,保存数据需要回传后端的。
        if(dat)   setStorage({...dat, ...snap, _version: items?.version});       //台账基础信息优先采信
        else   setStorage({ ...snap, _version: items?.version});
        console.log("【id切换】才会执行的：左边页面的-Relay3query获取后进的-",dat,"snap",snap);        //点击不同的编辑区块链接跳转后这个竟然没有再去运行！！
    }, [items, setStorage]);
    if(items && !items.snapshot) return (
        <React.Fragment>
            {
                `该报告的基础信息未赋值`
            }
        </React.Fragment>
    );
    if(!items)  return null;

    return (
    <React.Fragment>
       { storage &&
            <RecordEditorOrPrint id={routeData.params.repId!} source={storage} items={items}
                            action={routeData.params.action} templateSet={ {report:reportNode, original:originalNode} }
                            templateID={routeData.params.template} verId={routeData.params.verId}
           />
       }
    </React.Fragment>
    );
}


export interface RecordEditorOrPrintProps {
  id: string;
  source: any;  //原始记录的json数据 + 。
  templateSet: any;   //类似pdf*模板
  templateID: string;
  verId: string;
  action: string;
    // children?: React.ReactNode;
    items: any;
}
//左边的正式报告，而且是带原始记录的场景。
export const RecordEditorOrPrint: React.FunctionComponent<RecordEditorOrPrintProps> = (
  {
      source, templateSet, action,
      id, templateID, verId,items,
  }
) => {
  const theme = useTheme();
    const {user, setUser} =useContext(UserContext);
    //电脑情形需要显示右半边的页面， 手机的小屏幕宽度的只能整体显示右半边页面
  const [activeTab, setActiveTab] = React.useState(0);
    const { call:signOut } = useLogoutMutation();
  console.log("左边的-RecordEditorOrPrint当前ORc-source=",source ,"id=",id);
  //路由组件实际给我的再做一层包裹的ReactNode节点 routeData={routeData}  prepared={prepared}  children={props.children}

  return (
      <React.Fragment>
          {templateSet?.report &&
            <EmbeddedReport id={id}  source={source} template={templateSet.report} items={items}/>
          }
      </React.Fragment>
  );
};


interface EmbeddedReportProps {
  id: string;
  source: any;
  template: React.ReactElement<React.ForwardRefRenderFunction<InternalItemHandResult,ReportViewProps>>;
    /**嵌套组件的传递relay Ref*/
    items: any;
}
/**报告当做左边的导航列表， 点击左边页面的校验项目列表切换显示右边的原始记录页面。
 * 左边导航报告形态的组件和正式报告打印预览组件最后都走 <ReportStarter 这个共同入口了。
 * */
const EmbeddedReport: React.FunctionComponent<EmbeddedReportProps> = ({ id,items, source, template}
) => {
    const { bottomCss } = useMMenuBarOcup(false);
        //下面css={{没法生效的， 转成style={{ ？？
  return (
    <div  className="EmbeddedReport"
          style={{
              backgroundColor: "white",
          }}
      css={{
        overflowY: 'auto',
        height: '100%',
        ...bottomCss,
      }}
    >
      <ReportStarter id={id}  source={source} template={template} items={items}/>
    </div>
  );
};


// export default OriginalRecordMain;
